"use client";

import { MacroList } from "@/src/types/types.v1";
import { Box, Checkbox, Input } from "@chakra-ui/react";
import { MacroReleaseIcon } from "../Icons/MacroReleaseIcon";
import { MacroPressIcon } from "../Icons/MacroPressIcon";
import { MacroOtherIcon } from "../Icons/MacroOtherIcon";
import { MacroRepeatIcon } from "../Icons/MacroRepeatIcon";
import MacroActionEditor from "./MacroActionEditor";
import { useState } from "react";
import { useTranslation } from "@/src/i18n";
import React, { useContext } from "react";
import { MainContext } from "@/src/providers/MainProvider";

function MacroEditorV2({
  macro,
  onChange,
  onRecord,
}: {
  macro: MacroList;
  onChange: (macro: MacroList) => void;
  onRecord: (start: boolean) => void;
}) {
  const changeType = (type: number) => {
    if (record) return;
    onChange({ ...macro, type });
  };

  const [delay, setDelay] = useState(50);
  const [useDelay, setUseDelay] = useState(true);
  const [record, setRecord] = useState(false);
  const { t } = useTranslation("");
  const { hasMacroType4 } = useContext(MainContext);

  return (
    <div>
      <Box className="flex justify-between items-center">
        <Box className="flex px-[40px] pt-4 gap-3 items-center">
          <Box className={record ? "text-gray-400" : ""}>{t("createType")}</Box>
          <Box className="flex items-center gap-4">
            <Box
              className="p-2 border border-gray-300 bg-[#2b2d31] rounded aria-selected:border-blue-1 [&_svg]:aria-selected:fill-transparent [&_svg]:aria-selected:text-blue-1 [&_svg]:aria-selected:stroke-blue-1 cursor-pointer aria-disabled:!border-gray-300 [&_svg]:aria-disabled:!text-gray-400 [&_svg]:aria-disabled:!stroke-gray-400"
              aria-disabled={record}
              aria-selected={macro.type == 2}
              onClick={() => changeType(2)}
            >
              <MacroReleaseIcon className="w-6 h-6" />
            </Box>
            {hasMacroType4 && (
              <Box
                className="p-2 border border-gray-300 bg-[#2b2d31] rounded aria-selected:border-blue-1 [&_svg]:aria-selected:fill-transparent [&_svg]:aria-selected:text-blue-1 aria-disabled:border-gray-300 [&_svg]:aria-disabled:text-gray-400 [&_svg]:aria-disabled:stroke-gray-400 [&_svg]:aria-selected:stroke-blue-1 cursor-pointer"
                aria-disabled={record}
                aria-selected={macro.type == 4}
                onClick={() => changeType(4)}
              >
                <MacroPressIcon className="w-6 h-6" />
              </Box>
            )}
            <Box
              className="p-2 border border-gray-300 bg-[#2b2d31] rounded aria-selected:border-blue-1 [&_svg]:aria-selected:fill-transparent [&_svg]:aria-selected:text-blue-1 aria-disabled:border-gray-300 [&_svg]:aria-disabled:text-gray-400 [&_svg]:aria-disabled:stroke-gray-400 [&_svg]:aria-selected:stroke-blue-1 cursor-pointer"
              aria-disabled={record}
              aria-selected={macro.type == 3}
              onClick={() => changeType(3)}
            >
              <MacroOtherIcon className="w-6 h-6" />
            </Box>
            <Box
              className="p-2 border border-gray-300 bg-[#2b2d31] rounded aria-selected:border-blue-1 [&_svg]:aria-selected:fill-transparent [&_svg]:aria-selected:text-blue-1  [&_svg]:aria-selected:stroke-blue-1 cursor-pointer aria-disabled:border-gray-300 [&_svg]:aria-disabled:text-gray-400 [&_svg]:aria-disabled:stroke-gray-400"
              aria-disabled={record}
              aria-selected={macro.type == 0}
              onClick={() => changeType(0)}
            >
              <MacroRepeatIcon className="w-6 h-6" />
            </Box>
          </Box>
        </Box>
        <Box className="flex items-center gap-2 pr-12">
          <Checkbox
            isChecked={useDelay}
            className="border-line-2"
            disabled={record}
            onChange={(evt) => setUseDelay(evt.target.checked)}
          />
          <Box
            className="text-nowrap flex items-center gap-2 aria-disabled:text-gray-400"
            aria-disabled={record}
          >
            {t("standardDelay")}
            {useDelay ? (
              <Input
                size="sm"
                width="50px"
                type="number"
                value={delay}
                onChange={(e) => setDelay(Number(e.target.value))}
                min={1}
                maxLength={5}
              />
            ) : (
              <span>50</span>
            )}
            ms
          </Box>
        </Box>
      </Box>
      <MacroActionEditor
        actions={macro.actions}
        delay={delay}
        useDelay={useDelay}
        onChange={(actions) => {
          onChange({ ...macro, actions });
        }}
        onRecord={(record) => {
          setRecord(record);
          onRecord(record);
        }}
      />
    </div>
  );
}

export default MacroEditorV2;
